<template>
	<div>
		<div class="header">
			<div class="bgcolour">
				<div class="text">
					<view class="u-content">
						<u-parse :html="Content"></u-parse>
					</view>
				</div>
				<div class="image">
					<image class="image-tb" src="../../static/HomePage/PMRCTB.PNG" mode=""></image>
					<!-- <u-image width="100%" height="300rpx" :src="src">
						<u-loading slot="loading"></u-loading>
					</u-image> -->
				</div>
			</div>
		</div>
		<div class="center">
			<div class="TypeSelection">
				<div class="row" v-for="(item,index) in TypeSelection" :key="index">
					<div class="selection">{{item.name}}</div>
				</div>
			</div>
			<div class="ActivityList" v-for="(item,index) in ActivityList" :key="index">
				<div class="Activity" @click="tzhdy(item.name)">
					<div class="left">
						<div class="title">{{item.name}}</div>
						<div class="Activitydate"><u-icon name="clock"></u-icon>
							<div class="text">{{item.startTime}}</div>
						</div>
						<div class="Activityaddress"><u-icon name="map"></u-icon>
							<div class="text">{{item.address}}</div>
						</div>
					</div>
					<div class="right">
						<div class="Activitytype">{{item.startType}}</div>
						<image class="Activitypicture" src="../../static/HomePage/PMRC.PNG" mode=""></image>
					</div>
				</div>
			</div>
		</div>
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>

	</div>
</template>

<script>
	import {
		getInit
	} from '@/api/HomePage.js'
	export default {
		data() {
			return {
				Content: ``,
				// src: '../../static/HomePage/PMRC.PNG',
				TypeSelection: [],
				ActivityList: [],
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				current: 0
			}
		},
		onLoad() {
		this.Init()
		},
		 methods: {
			async Init()  {
				const data = await getInit();
				this.Content =  data.content
				this.TypeSelection  =data.typeSelection
				this.ActivityList = data.activityList
			},
			tzhdy(index){
				uni.navigateTo({
					url: '/pages/HomePage/Application'
				})
			}
		}

	}
</script>

<style lang="scss">
	.header {
		width: 640upx;
		height: 260upx;
		margin: auto;
		margin-top: 60upx;

		.bgcolour {
			width: 640upx;
			height: 206upx;
			opacity: 1;
			border-radius: 40upx;
			background: rgba(227, 225, 220, 1);
			display: flex;

			.text {
				width: 254upx;
				height: 190upx;
				opacity: 1;
				flex: 2;
				margin: 20upx 0px 0px 80upx;
			}

			.image {
				flex: 1;
				margin-top: -80upx;

				&-tb {
					width: 320upx;
					height: 360upx;
				}
			}
		}
	}

	.center {
		width: 640upx;
		margin: auto;

		.TypeSelection {
			width: 660upx;
			//height: 154upx;
			display: flex;
			flex-wrap: wrap;
            justify-content: flex-start;

			.Qb {
				margin-right: 20upx;
			}

			.selection {
				//width: 93px;
				height: 60upx;
				padding: 10upx 20upx;
				border-radius: 24upx;
				border: 2upx solid black;
				margin-right: 20upx;
				margin-bottom: 10upx;
			}

			.selection:hover {
				background-color: black;
				color: white;
			}
			.selection:visited {
				background-color: black;
				color: white;
			}
		}

		.ActivityList {
			width: 668upx;
			margin: 0 auto;
			margin-top: 30upx;

			.Activity {
				width: 668upx;
				height: 236upx;
				opacity: 1;
				border-radius: 40upx;
				background: rgba(196, 196, 196, 1);
				display: flex;

				.left {
					width: 380upx;
					margin-left: 40upx;

					.title {
						padding-top: 30upx;
						width: 346upx;
						height: 50upx;
						font-size: 32upx;
						font-weight: 400;
						letter-spacing: 3.8upx;
						line-height: 48upx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.Activitydate {
						padding-top: 100upx;
						display: flex;

						.text {
							margin-left: 16upx;
							overflow: hidden;
							white-space: nowrap; //内容超出不换行
							text-overflow: ellipsis;
						}
					}

					.Activityaddress {
						padding-top: 10upx;
						display: flex;

						.text {
							margin-left: 16upx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

				.right {
					.Activitytype {
						width: 120upx;
						height: 60upx;
						float: right;
						border-radius: 0px 30upx 0px 0px;
						text-align: center;
						line-height: 60upx;
						background-color: greenyellow;
					}

					.Activitypicture {
						float: right;
						width: 250upx;
						height: 180upx;
						opacity: 1;
						border-radius: 12upx;
					}
				}

			}
		}

	}
</style>